<script setup lang="ts">
import { ref } from 'vue';
import type { UploaderFileListItem } from 'vant';

definePageMeta({
  // layout: 'default2',
  title: '个人资料',
  i18n: 'menu.person',
});

const imageUrl = ref<string>('');
const showImage = ref<boolean>(false);
const showEditIcon = ref<boolean>(false);
const showImageViewer = ref<boolean>(false);

const afterRead = (file: UploaderFileListItem | UploaderFileListItem[]) => {
  if (Array.isArray(file)) {
    handleFile(file[0]);
  } else {
    handleFile(file);
  }
};
// 上传图片
const handleFile = (fileItem: UploaderFileListItem) => {
  if (fileItem.file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      imageUrl.value = e.target?.result as string;
      showImage.value = true;
      showEditIcon.value = true;
    };
    reader.readAsDataURL(fileItem.file);
  } else {
    console.error('上传的文件无效');
  }
};
// 删除图片
const deleteImage = () => {
  imageUrl.value = '';
  showImage.value = false;
  showEditIcon.value = false;
};
// 图片预览
const openImageViewer = () => {
  if (imageUrl.value) {
    showImageViewer.value = true;
  }
};
// 关闭图片预览
const closeImageViewer = () => {
  showImageViewer.value = false;
};
const onSubmit = (e: any) => {

};
const username = ref('廖**')
const phone = ref('13883746767')
</script>

<template>
  <div mx-auto text-16 text-dark dark:text-white>
    <!-- <div>

    </div> -->
    <van-form @submit="onSubmit" required="auto" rounded-10>
      <van-cell title="个人头像">
        <template #value>
          <div class=" relative w-full h-52" @click="openImageViewer">
            <van-uploader v-if="!showImage" :after-read="afterRead" />
            <div class="relative h-full box">
              <img v-if="showImage" :src="imageUrl" class="avatar w-50 rounded-full" />
              <van-icon v-if="showEditIcon" name="edit" class=" text-white bg-black bg-opacity-50 rounded-full p-1"
                @click.stop="deleteImage" />
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell title="用户名">
        <template #value>
          <van-field v-model="username" name="username" :rules="[{ required: true, message: '请填写用户名' }]" />
        </template>
      </van-cell>
      <van-cell title="手机号">
        <template #value>
          <van-field v-model="phone" name="phone" :rules="[{ required: true, message: '请填写手机号' }]" />
        </template>
      </van-cell>

    </van-form>
    <van-image-preview v-model:show="showImageViewer" :images="[imageUrl]" @close="closeImageViewer" />
  </div>
</template>

<style lang="css" scoped>
::v-deep .van-uploader__upload {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: rgb(76, 76, 78);
}

::v-deep .van-cell__title,
.van-cell__value {
  display: flex;
  align-items: center;
}

::v-deep .box .van-icon {
  position: absolute;
  bottom: 2px;
  right: 12px;
}

::v-deep .van-cell__value {
  right: 0;
}
::v-deep .van-cell:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
::v-deep .van-cell:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

::v-deep .van-field__control {
  text-align: right;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* margin-top: 10px; */
  position: absolute;
  right: 10px;
}
</style>